<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <title>Material Admin</title>
        
        <!-- Vendor CSS -->
        <link th:href="@{vendors/bower_components/animate.css/animate.min.css}" rel="stylesheet"/>
        <link th:href="@{vendors/bower_components/material-design-iconic-font/dist/css/material-design-iconic-font.min.css}" rel="stylesheet"/>
            
        <!-- CSS -->
        <link th:href="@{css/app.min.1.css}" rel="stylesheet"/>
        <link th:href="@{css/app.min.2.css}" rel="stylesheet"/>
    </head>
    <body class="login-content">
        <!-- Login -->
        <div class="lc-block toggled" id="l-login">
            <form th:action="@{/login}" method="post" id="login_form">
                <div class="input-group m-b-20">
                    <span class="input-group-addon"><i class="zmdi zmdi-account"></i></span>
                    <div class="fg-line">
                        <input type="text" class="form-control" id="username" name="username" placeholder="用户名称"/>
                    </div>
                </div>
                <div class="input-group m-b-20">
                    <span class="input-group-addon"><i class="zmdi zmdi-male"></i></span>
                    <div class="fg-line">
                        <input type="password" class="form-control" id="password" name="password" placeholder="用户密码"/>
                    </div>
                </div>
            </form>
            <div class="c-red f-400" th:if="${param.error}">
                用户名或密码错误
            </div>
            <div class="c-green f-400" th:if="${param.logout}">
                您已注销成功
            </div>
            <div class="clearfix"></div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" id="remember_me" value=""/>
                    <i class="input-helper"></i>
                    记住我
                </label>
            </div>
            <a href="#" id="login_btn" class="btn btn-login btn-danger btn-float"><i class="zmdi zmdi-arrow-forward"></i></a>
            <!--<ul class="login-navigation">-->
                <!--<li data-block="#l-register" class="bgm-red">注册</li>-->
                <!--<li data-block="#l-forget-password" class="bgm-orange">忘记密码</li>-->
            <!--</ul>-->
        </div>
        
        <!-- Register -->
        <div class="lc-block" id="l-register">
            <div class="input-group m-b-20">
                <span class="input-group-addon"><i class="zmdi zmdi-account"></i></span>
                <div class="fg-line">
                    <input type="text" class="form-control" placeholder="用户名称"/>
                </div>
            </div>
            
            <div class="input-group m-b-20">
                <span class="input-group-addon"><i class="zmdi zmdi-email"></i></span>
                <div class="fg-line">
                    <input type="text" class="form-control" placeholder="Email地址"/>
                </div>
            </div>
            
            <div class="input-group m-b-20">
                <span class="input-group-addon"><i class="zmdi zmdi-male"></i></span>
                <div class="fg-line">
                    <input type="password" class="form-control" placeholder="用户密码"/>
                </div>
            </div>
            
            <div class="clearfix"></div>
            
            <div class="checkbox">
                <label>
                    <input type="checkbox" value=""/>
                    <i class="input-helper"></i>
                    Accept the license agreement
                </label>
            </div>
            
            <a href="" class="btn btn-login btn-danger btn-float"><i class="zmdi zmdi-arrow-forward"></i></a>
            
            <ul class="login-navigation">
                <li data-block="#l-login" class="bgm-green">登录</li>
                <li data-block="#l-forget-password" class="bgm-orange">忘记密码</li>
            </ul>
        </div>
        
        <!-- Forgot Password -->
        <div class="lc-block" id="l-forget-password">
            <p class="text-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu risus. Curabitur commodo lorem fringilla enim feugiat commodo sed ac lacus.</p>
            
            <div class="input-group m-b-20">
                <span class="input-group-addon"><i class="zmdi zmdi-email"></i></span>
                <div class="fg-line">
                    <input type="text" class="form-control" placeholder="Email地址"/>
                </div>
            </div>
            
            <a href="" class="btn btn-login btn-danger btn-float"><i class="zmdi zmdi-arrow-forward"></i></a>
            
            <ul class="login-navigation">
                <li data-block="#l-login" class="bgm-green">Login</li>
                <li data-block="#l-register" class="bgm-red">Register</li>
            </ul>
        </div>
        <!-- Javascript Libraries -->
        <script th:src="@{vendors/bower_components/jquery/dist/jquery.min.js}"></script>
        <script th:src="@{vendors/bower_components/bootstrap/dist/js/bootstrap.min.js}"></script>
        <script th:src="@{vendors/bower_components/Waves/dist/waves.min.js}"></script>
        <script th:src="@{js/jquery.cookie.js}"></script>
        <script th:src="@{js/functions.js}"></script>
        <script>
            $(function(){
//                rememberMe();
                $("#login_btn").on("click",function(){
//                    saveUserInfo();
                    $('#login_form').submit();
                })
            })

            function rememberMe(){
                if ($.cookie("remember_me") == "true") {
                    $("#remember_me").attr("checked", true);
                    $("#username").val($.cookie("username"));
                    $("#password").val($.cookie("passWord"));
                }
            }

            //保存用户信息
            function saveUserInfo() {
                if ($("#remember_me").attr("checked") == true) {
                    var username = $("#username").val();
                    var password = $("#password").val();
                    $.cookie("remember_me", "true", { expires: 7 }); // 存储一个带7天期限的 cookie
                    $.cookie("username", username, { expires: 7 }); // 存储一个带7天期限的 cookie
                    $.cookie("password", password, { expires: 7 }); // 存储一个带7天期限的 cookie
                }
                else {
                    $.cookie("remember_me", "false", { expires: -1 });
                    $.cookie("username", '', { expires: -1 });
                    $.cookie("password", '', { expires: -1 });
                }
            }

        </script>
    </body>
</html>